<template>
  <div 
    class="container" 
    @touchstart="onTouchStart" 
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
  >
      <Page_1 v-if="active === 1" />
      <Page_2 v-if="active === 2" />
      <Page_3 v-if="active === 3"  />
      <Page_4 v-if="active === 4"  />
      <Page_5 v-if="active === 5"  />
      <Page_6 v-if="active === 6"  />
  </div>
</template>

<script setup>
import Page_1 from './components/page_1.vue';
import Page_2 from './components/page_2.vue';
import Page_3 from './components/page_3.vue';
import Page_4 from './components/page_4.vue';
import Page_5 from './components/page_5.vue';
import Page_6 from './components/page_6.vue';
import { ref } from 'vue'

// 换页标识符
const page = 6
const active = ref(2)

// 记录点位置
const point = {
  startY: 0,
  distanceY: 0
}

// 触摸开始事件
const onTouchStart = (e) => {
  // 设置起点y坐标
  point.startY = e.targetTouches[0].pageY
  // 与起始点距离
  point.distanceY = 0
}

// 触摸移动事件
const onTouchMove = (e) => {
  if (e.targetTouches.length > 1) return
  // 计算与起始点距离 上划为负，下划为正
  point.distanceY = e.targetTouches[0].pageY - point.startY
}


// 触摸结束事件
const onTouchEnd = (e) => {
  // 短距离触摸不触发分页效果
  if (Math.abs(point.distanceY) < 10) return 
  // 记录是上划还是下划
  if (point.distanceY > 0) {
    // 当前页码大于1时，页码-1
    active.value > 1 && active.value --
  }else {
    // 当前页码小于5时，页码+1
    active.value < page && active.value ++
  }
}

</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
</style>
